<template lang="html">
  
  <section class="banner">
    <div class="block home_wrap">
      <el-carousel class="my-swiper-box" :height="bannerH+'px'">
        <!-- for循环轮播 -->
        <el-carousel-item :key='1' class='home_carousel'>
          <a href="" title="">
            <img src="../../assets/img/banner_1.jpg" alt="">
          </a>
        </el-carousel-item>
        <el-carousel-item :key='1' class='home_carousel'>
          <a href="" title="">
            <img src="../../assets/img/banner_1.jpg" alt="">
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
  </section>

</template>

<script lang="js">
  export default  {
    name: 'home-banner',
    props: [],
    mounted() {

    },
    data() {
      return {
        bannerH:420
      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped lang="scss">
// $Height:300px;
.home_wrap {
  position: relative;
  // height: $Height;
  .my-swiper-box {
    width: 100%;
    overflow: hidden;
  }
  .home_carousel {
    border-top: 2px solid #009fe2;
    width: 100%;
    a {
      // height: $Height;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
